* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 3.2vw;
}

li {
  list-style: none;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.v-h-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.v-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.h-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.music audio {
  display: none;
}

.music img {
  display: none;
  position: fixed;
  top: 5vw;
  right: 5vw;
  z-index: 10;
  width: 9.4vw;
}

.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.load {
  background-image: url("../img/load/bg.png");
}

.load .moon,
.load .moon-halo {
  position: absolute;
  top: 0;
  right: 0;
  width: 45vw;
}

.moon-halo {
  animation: halo 3s linear infinite;
}

.cloud {
  --cloud-left: calc(100vw - 33vw);

  width: 33vw;
  animation: cloudTranslateX 5s ease-in-out alternate infinite;
}

.load .cloud {
  margin-top: 5vh;
}

.load .loading {
  width: 80vw;
}

.load .ce {
  width: 7.6vw;
  transform: translateX(-50%);
}

.load .progress {
  position: relative;
  width: 100%;
  height: 2.5vh;
  background-color: #000;
  border-radius: 2vh;
}

.load .progress .bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #f59f58;
  border-radius: inherit;
}

.load .load-text {
  margin-top: 1vh;
  font-size: 3.7vw;
  font-weight: bold;
}

.lotus {
  position: absolute;
  bottom: 20vw;
  left: 10vw;
  width: 30.9vw;
  transform-origin: 5.3vw bottom;
  animation: lotusRotate 5s ease-in-out infinite alternate;
}

.p1 {
  background-image: url("../img/p1/bg.png");
}

.p1 .title {
  width: 34.5vw;
  margin-top: 5vh;
}

.p1 .cloud {
  margin-top: 20vh;
}

.p1 .moon {
  position: relative;
  width: 100%;
}

.p1 .moon img {
  --w: 71.7vw;

  position: absolute;
  left: calc(50% - var(--w) / 2);
  width: var(--w);
}

.p1 .tg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding-top: 10vh;
}

.right-away {
  bottom: 12vw;
  width: 50vw;
}

.p2 {
  background-image: url("../img/p2/bg.png");
}

.p2 .cloud {
  position: absolute;
  top: 20vh;
}

:is(.p2, .p3) .moon {
  --w: 71.7vw;

  position: absolute;
  left: calc(50% - var(--w) / 2);
  width: var(--w);
}

:is(.p2, .p3, .p4) .moon img {
  position: absolute;
  top: 0;
  width: var(--w);
}

:is(.p2, .p3, .p4) .moon .ce {
  top: 2vh;
  width: 37.3vw;
}

.p2 .lotus {
  animation: none;
}

.p2 .content {
  position: absolute;
  top: 36vw;
  width: 90.6vw;
  height: 137.3vw;
  padding: 0 9.3vw;
  background: rgba(255, 255, 255, 80%);
  border-radius: 10vw;
}

.p2 .content .title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 26.6vw;
  color: red;
}

.p2 .content .title img {
  width: 12vw;
}

.p2 .content .title span {
  font-size: 5vw;
}

.p2 .content .text {
  line-height: 9.3vw;
}

.p2 .rule {
  display: flex;
  justify-content: center;
  margin-top: 10vw;
}

.p2 .rule div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 25vw;
}

.p2 .rule div:first-child img:first-child {
  width: 10vw;
}

.p2 .rule div:first-child img:last-child {
  width: 8.9vw;
}

.p2 .rule div:last-child {
  padding-top: 4vw;
  margin-left: 24vw;
}

.p2 .rule div:last-child img:first-child {
  width: 9.2vw;
}

.p2 .rule div:last-child img:last-child {
  width: 4.9vw;
}

.p3 {
  background-image: url("../img/p3/bg.png");
}

.p3 .cloud {
  position: absolute;
  top: 17vw;
}

.p3 .header {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 20vw;
  padding: 0 5.3vw;
}

.p3 .header>div {
  display: flex;
  align-items: center;
  color: #fff;
}

.p3 .header>div span {
  margin-left: 2.6vw;
  color: red;
}

.p3 .header>div img {
  margin-right: 2vw;
}

.p3 .header .left span {
  font-size: 5.3vw;
}

.p3 .header .left img {
  width: 10.9vw;
}

.p3 .header .right img {
  width: 6vw;
}

.p3 .header .right b {
  font-size: 5.3vw;
}

.p3 .list {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 16vw 9.3vw;
  width: 100%;
  padding: 0 5.3vw;
  margin-top: 13.3vw;
}

.p3 .list li {
  --w: 22.6vw;
  
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w);
  height: var(--w);
  background: url("../img/p3/smallmoon.png") no-repeat;
  background-size: 100% 100%;
}

.p3 .list li img {
  --w: 13.2vw;
  position: absolute;
  width: var(--w);
}

.p3 .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 50%);
}

.p3 .mask>div {
  display: none;
  width: 100%;
  margin-top: 33.33vw;
  text-align: center;
}

.p3 .mask>div .status {
  width: 72.8vw;
}

.p3 .mask>div img:nth-child(2) {
  margin: 6.6vw 0;
}

.p4 {
  background-image: url('../img/p4/bg.png');
}

.p4 .lotus {
  animation: none;
}

.p4 .moon img {
  position: absolute;
  right: 0;
  top: 0;
  width: 61.8vw;
}

.p4 .ce {
  --left: 16vw;
  position: absolute;
  bottom: 33vw;
  left: var(--left);
  width: 30.9vw;
  /* animation: flight 5s steps(5); */
}

.p4 .ce.flight {
  animation: flight 5s linear;
}

.p4 .cloud-list {
  position: relative;
}

.p4 .cloud-list .cloud {
  position: absolute;
}

.p4 .cloud-list .cloud:nth-child(1) {
  top: 9.3vw;
}

.p4 .cloud-list .cloud:nth-child(2) {
  top: 53.3vw;
  animation-delay: 2s;
}

.p4 .petal img {
  position: absolute;
  width: 9.7vw;
}

.p5 {
  background-image: url('../img/p5/bg.png');
}

.p5 .cloud {
  position: absolute;
  top: 9.3vw;
}

.p5 .moon {
  width: 44.8vw;
  margin-top: -12vw;
}

.p5 .ce {
  width: 42vw;
  margin-right: 6.66vw;
}

.p5 .content {
  position: relative;
  top: 20vw;
  height: 126.6vw;
  width: 90.8vw;
  background-color: #fdf5e0;
  margin: 0 auto;
  border-radius: 10vw;
}

.p5 .header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.p5 .title {
  width: 20vw;
  margin-left: 14.6vw;
  margin-top: 9.3vw;
}

.p5 .content .right {
  position: relative;
}

.p5 .content .right img {
  position: absolute;
  top: 0;
  right: 0;
}

.p5 .text {
  width: 100%;
  padding: 0 11.3vw;
}

.p5 .text p {
  line-height: 16vw;
  height: 16vw;
  border-bottom: #eae1ce dashed;
}

.p5 .text p:nth-child(2) {
  text-indent: 2em;
}

.p5 .text p:nth-child(3) {
  text-indent: 2em;
}

.p5 .text p:nth-child(4) {
  text-align: right;
}

.p5 .text p span {
  display: inline-block;
  width: 8vw;
  text-align: left;
}
